<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>搜索</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <link rel="stylesheet" type="text/css" href="../css/style.css"/>
      <style>
          .search{width: 100%;height: auto;100%;}
          .find{padding: 13px 20px;display: flex;justify-content: space-between;align-items: center;}
          .find form{display: flex;align-items: center;flex: 2}
          .find input{width: 100%;height: 36px;color: #000;background: url('../image/search.png') #f5f5f5;background-repeat: no-repeat;
          background-size: 13px 13px;background-position: 15px center;border-radius: 24px;padding-left: 37px}
          .find span.cancal{font-size: 15px;color: #000;margin-left: 15px;}
          .content{padding: 17px 25px 0;}
          .content .hot{font-size: 15px;color: #a5a5a5;padding-bottom: 20px}
          .tab{display: flex;align-items: center;}
          .tab span{padding: 5px 12px;background: #F5F5F5;border-radius: 5px;color: #555;font-size: 14px;margin-right: 12px}
          .list{padding: 0 15px;}
          .list .wrap{display: flex;flex-direction: column;justify-content: space-around;padding: 15px 0;margin-bottom: 3px;border-bottom: 1px solid #e8e8e8}
          .list .wrap .top{display: flex;align-items: center;justify-content: space-between;}
          .list .top .title{font-size: 16px;font-weight: bold;color: #000;}
          .list .top .money{font-size: 14px;color:  #EB5758;flex-shrink: 0}
          .list .top .money span.font{font-size: 24px;color:  #EB5758;}
          .list .center{display: flex;align-items: center;padding: 5px 0;}
          .list .center span{padding: 3px 9px;border-radius: 5px;background-color: #E4E7F0;color:  #8B8EA3;font-size: 11px;margin-right: 10px}
          .list .below{display: flex;justify-content: space-between;align-items: center;}
          .list .below .name{font-size: 14px;color: #999999;}
          .list .below .way{font-size: 14px;color: #999999;}
          .toast{width: 100%;height: 100%;}
          .message{position: fixed;bottom: 60px;left: 15%;z-index: 99;background-color: #F0F0F0;width:70%;height: 50px;display: flex;justify-content: center;align-items: center;
            color: #000;font-size: 16px;border-radius: 30px}
          .none{display: none}
          .show{display: block;}

      </style>
  </head>
  <body>
    <div class="search">
        <div class="find">
          <form onsubmit='return fnSearch();'>

            <input type="search" placeholder="搜索你想要的兼职" class="keyword">
          </form>
          <span class="cancal">取消</span>
        </div>
        <div class="content">
          <div class="hot">热门搜索</div>
          <div class="tab">
            <span class="tabspan">兼职</span>
            <span class="tabspan">短期</span>
            <span class="tabspan">打字员</span>
            <span class="tabspan">售货员</span>
          </div>
        </div>
        <div class="list none">
          <!-- <div class="wrap">
            <div class="top">
              <div class="title line1">全新网络在线高薪兼职，简单立结!</div>
              <div class="money"><span class="font">800</span> 元/天</div>
            </div>
            <div class="center">
              <span>男女不限</span>
              <span>长期</span>
            </div>
            <div class="below">
              <div class="name">南京主流艺术培训有限公司</div>
              <div class="way">日结</div>
            </div>
          </div> -->

        </div>
    </div>
    <div class="toast none">
      <div class="message">没有相关内容，请重新搜索</div>
    </div>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/encrypt.js"></script>
  <script type="text/javascript">
      apiready = function(){
        $api.fixStatusBar($api.dom('.search'));
        var base = new Base64();
        var keyword = ''

        $api.addEvt($api.dom('.cancal'), 'click', function(){ //关闭收缩页面
          api.closeWin();

        });

        var tabList = $api.domAll('.tabspan');

        for (var i = 0; i < tabList.length; i++) {
          $api.addEvt(tabList[i], 'click', function(){

            keyword = $api.html(this);
            search(keyword,1)

          });

        }
        api.addEventListener({
            name:'scrolltobottom',
            extra:{
                threshold:20           //设置距离底部多少距离时触发，默认值为0，数字类型
            }
        }, function(ret, err){

          if (b < 20 ) {
                $api.append($api.dom('.list'),'<div class="nomore">没有更多了~</div>')
                api.removeEventListener({
                    name: 'scrolltobottom'
                });
            } else {
                pi+=1;
                search(keyword,pi)
            }
        });

      };

      function tostmessage(){

        $api.removeCls($api.dom('.toast'), 'none');
        $api.addCls($api.dom('.toast'), 'show');

        setTimeout(function(){
          $api.addCls($api.dom('.toast'), 'none');
          $api.removeCls($api.dom('.toast'), 'show');

        },2000)

      }
      var b = 0
      var arryHtml = []
      var pi = 1
      function fnSearch(keyword,pi){
        arryHtml = []
        keyword = $api.val($api.dom('.keyword'))
        search(keyword,pi)
        pi = 1
        api.addEventListener({
            name:'scrolltobottom',
            extra:{
                threshold:20           //设置距离底部多少距离时触发，默认值为0，数字类型
            }
        }, function(ret, err){

          if (b < 20 ) {
                $api.append($api.dom('.list'),'<div class="nomore">没有更多了~</div>')
                api.removeEventListener({
                    name: 'scrolltobottom'
                });
            } else {
                pi+=1;
                search(keyword,pi)
            }
        });
        return false;// 加上这句页面就不会刷新
      }

      function search(keyword,pi){

        unique(arryHtml)
        var base = new Base64();
        var pz = 20
        let json = {keyword:keyword,'pi':pi,'pz':pz}
        let parameter = base.encode(JSON.stringify(json));
        let signValue = parameter + secretKey;
        let sign = signValue.MD5(32);

        $api.post(url+'getJobListBySearch.ashx', {values:{parameter:parameter,sign:sign}}, function(ret){
          // alert($api.jsonToStr(ret))
          
          if(ret.code == 200){

            document.activeElement.blur();
            var data = ret.data.JobList;
            var html = '';
            b = data.length
            if(!data.length){
              b = 0
            }
            if(b > 0){
              arryHtml = arryHtml.concat(data)
              $api.addCls($api.dom('.content'), 'none');
              $api.removeCls($api.dom('.list'), 'none');
              for (var i = 0; i < arryHtml.length; i++) {
                html+='<div class="wrap" data-id="'+arryHtml[i].jianZhiID+'">'+
                  '<div class="top">'+
                    '<div class="title line1">'+arryHtml[i].listTitle+'</div>'+
                    '<div class="money"><span class="font">'+arryHtml[i].salary+'</span>'
                    if(arryHtml[i].salaryUnit == 10){ //薪水单位
                      html+='元/小时</div>'
                    }else if(arryHtml[i].salaryUnit == 20){
                      html+='元/天</div>'
                    }else if(arryHtml[i].salaryUnit == 30){
                      html+='元/次</div>'
                    }

                  html+='</div>'+
                  '<div class="center">'
                  if(arryHtml[i].sex == 10){ //性别要求
                    html+='<span >仅限男</span>'
                  }else if(arryHtml[i].sex == 20){
                    html+='<span >仅限女</span>'

                  }else if(arryHtml[i].sex == 30){
                    html+='<span >男女不限</span>'
                  }
                  if(arryHtml[i].effective == 10){ //有效时间
                    html+='<span>长期</span>'
                  }

                  html+='</div>'+
                  '<div class="below">'+
                    '<div class="name">'+arryHtml[i].detailTitle+'</div>'

                  if(arryHtml[i].paymentTerms == 10){ //结算方式
                    html+='<div class="way">日结</div>'
                  }else if(arryHtml[i].paymentTerms == 20){
                    html+='<div class="way">周结</div>'
                  }else if(arryHtml[i].paymentTerms == 30){
                    html+='<div class="way">月结</div>'
                  }

                  html+='</div>'+
                '</div>'
              }
              $api.html($api.dom('.list'), html);
              var wrapList = $api.domAll('.wrap');
              for (var i = 0; i < wrapList.length; i++) {
                $api.addEvt(wrapList[i], 'click', function(){
                  var jianZhiID = $api.attr(this,'data-id')
                  api.openWin({
                    name: 'jobDetails',
                    url: './jobDetails.html',
                    pageParam:{
                      jianZhiID:jianZhiID
                    }
                  });

                });
              }
            }else{
              if(arryHtml.length  == 0){

                tostmessage();
              }

            }
          }else{
            api.toast({
              msg: ret.msg,
              duration: 2000,
              location: 'middle'
            });
          }
        })

      }
      function unique(arr) {
        if (!Array.isArray(arr)) {
            console.log('type error!')
            return
        }
        var array = [];
        for (var i = 0; i < arr.length; i++) {
            if (array .indexOf(arr[i]) === -1) {
                array .push(arr[i])
            }
        }
        return array;
    }
  </script>
  </html>
